<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/*外边距margin属性:【微调：文字或者图片】
			margin使用问题1：自适应居中，建议使用div,套快元素、行快内元素、行内元素
			      使用问题2：
			*/
			img{
				border: 1px solid red;
				/*margin: 一个属性值   顺时针：上  右  下   左*/
				margin:200px;
				/*margin: 2个属性值   顺时针：上下  右左*/
				margin:10px  200px;
				/*常用：盒子自适应适中----失效
				块元素：可以设置宽高、不在一行显示。无法居中，内置文本
				  margin使用问题1：自适应居中，必须设置宽度
				*/
			   width: 100%;
				margin: 0 auto;
				/*margin: 3个属性值   顺时针：上  右左 下*/
				margin:100px 200px 300px;
			/*margin: 4个属性值   顺时针：上  右  下   左*/
			margin:100px 200px 300px 400px;
			}
			h1{
				/*块元素：可以设置宽高、不在一行显示。无法居中，内置文本
				   text-align:center;
				*/
				/*常用：盒子自适应适中----设置宽度*/
				width: 100%;
				border: 1px solid red;
				margin: 0 auto;
			}
			span{
				/*行元素：不可以设置宽高、不在一行显示。无法居中，内置文本
				  text-
				*/
				/*常用：盒子自适应适中----设置宽度*/
				width: 100%;
				border: 1px solid red;
				margin: 0 auto;
				
			}
			div{
				width: 200px;
				height: 200px;
				background: red;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<!-- 框模型、盒子模型：四个部分组成：
		                     外边距：边框以外四周，叫做外边框
							 margin属性
							 边框：--
							 内边距：边框以内与内容之间的距离，叫做内边距
							 内容：块
		所有元素存在于框模型中 -->
		<h1>块级元素</h1>
		<img src="img/圣诞节雪人_爱给网_aigei_com.png"  width="300px" height="300px"  alt="圣诞" />
		 <span>行内元素：圣诞</span>
	</body>
</html>